<template>
  <div class="supplier-slide-from">
    <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
      <el-form-item label="活动名称" prop="title">
        <el-col :span="12">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="图片(684*260)" prop="piclink">
        <el-col :span="12">
          <el-input v-model="form.piclink" disabled autocomplete="off" class="mar_bottom_5"></el-input>

          <compressimgUpload
            :onSuccess="onSuccess"
            :pic="form.piclink"
            :isOneImg="true"
            :isCropper='false'
            :files="fileList"
          ></compressimgUpload>
        </el-col>
      </el-form-item>
      <el-form-item label="地区" prop="province">
        <el-col :span="12">
          <city-cascader size="large" :placeholder="plad" :level="2" @change="handleChange" />
        </el-col>
      </el-form-item>

      <el-form-item label="链接" prop="links">
        <el-col :span="12">
          <el-input :disabled="bool" v-model="form.links" autocomplete="off"></el-input>
        </el-col>
        <el-col :span="5" :offset="1">
          <LinkMenu @sendRow="getSendRow"></LinkMenu>
        </el-col>
      </el-form-item>

      <el-form-item label="层级" prop="types" class="tl">
        <el-col :span="12">
          <el-radio-group v-model="form.types">
            <el-radio label="0">市</el-radio>
            <el-radio label="1">区</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
export default {
  name: "supplier-slide-from",
  props:{
      row:{
          type:Object,
          default:()=>{}
      }
  },
  data() {
    return {
      form: {
        title: "",
        types: "0",
        province: "",
        city: "",
        area: "",
        links: "",
        piclink:''
      },
      plad: "",
      fileList: [],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        piclink: [{ required: true, message: "请输入图片地址", trigger: "blur" }],
        province: [{ required: true, message: "请选择地区", trigger: "blur" }],
        links: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
        types: [{ required: true, message: "请选择层级", trigger: "change" }]
      },
      formLabelWidth: "120px",
      bool: true
    };
  },
  components: {
    compressimgUpload,
    LinkMenu,
    cityCascader
  },
  created() {
      if(JSON.stringify(this.row)!="{}"){
          this.form=this.row;
          this.plad=this.row.province+this.row.city+this.row.area;

      }
  },
  mounted() {},
  methods: {
    addSupplierSlide(params){
        this.$api.getSupplier.addSupplierSlide(params).then(res=>{
            if(res.data.code==200){
                this.$emit('hideDio',true)
                this.$fnc.alertSuccess({text:"添加成功"});
            }else{
                this.$fnc.alertError(res.data.code_desc,res.data.result);
            }
        })
    },
    editSupplierSlide(params){
        this.$api.getSupplier.editSupplierSlide(params).then(res=>{
            if(res.data.code==200){
                this.$emit('hideDio',true)
                this.$fnc.alertSuccess({text:"修改成功"});
            }else{
                this.$fnc.alertError(res.data.code_desc,res.data.result);
            }
        })
    },
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.form.province = value[i];
          if (i == 1) this.form.city = value[i];
          if (i == 2) this.form.area = value[i];
          if (i == 3) this.form.town = value[i];
        }
      }
    },
    onSuccess(pic) {
      this.form.piclink = pic;
    },
    getSendRow(row) {
      if (row == null) return false;

      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      if (row == null) return false;
      let index = row.index;
      if (!row.disable && row.title == "自定义链接") {
        this.form.links = "";

        return false;
      }

      if (row.url) {
        this.form.links = row.url;
      }

      if (row.url_title == "产品分类" && row.click_title == "供应商分类") {
        this.form.links = "/pages/shop/supplier/supplier?cate=" + row.id;
        return;
      }
      if (row.url_title == "产品分类" && row.click_title != "供应商分类") {
        this.form.links = "/shop/shopsearch?cate_id=" + row.id;
      }
      if (row.url_title == "旅游产品分类") {
        this.form.links = "/tourshop/cate?cate_id=" + row.id;
      }
      if (row.url_title == "插件管理") {
        this.form.links = row.url || "";
      }

      if (row.url_title == "商品选择") {
        this.form.links = "/pages/shop/shopdetail/shopdetail?id=" + row.id;
      }
      if (row.url_title == "文章添加") {
        this.form.links = "/pages/news/newsdetail/newsdetail?id=" + row.id;
      }
      if (row.url_title == "资讯分类") {
        this.form.links = "/news?cate_id=" + row.id;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            // this.$emit('hideDio')
            this.$bus.$emit('hide-from')
          var params={};
              params=this.form;
              if(params.id){
                this.editSupplierSlide(params)
              }else{
                  this.addSupplierSlide(params);
              }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang='less' scoped>
</style>
